<template>
  <div class="content">
    <div class="header-content">
      <div class="click-enter" @click="select">点击进入</div>
      <div class="actions">
        <button class="collect">
          <img src="../assets/collect-photo.png" class="collect-photo">
          <div class="collect-text">收藏</div>
        </button>
        <button class="share">
          <img src="../assets/share.png" class="share-photo">
          <div class="share-text">分享</div>
        </button>
      </div>
    </div>
    <div class="midle-content">
      <div class="course" :style="{ color: isSelected ? '#71c4ef' : 'black' }">{{ course }}</div>
      <div class="index-learn" :style="{ color: isSelected ? '#71c4ef' : '#6b7280' }">{{ indexLearn }}</div>
    </div>
    <div class="bottom-content">
      <div class="road-map">
        <img class="map-photo" src="../assets/roadmap.png">
        <div class="map-text">路线图</div>
      </div>
      <div class="complete">{{ progress }}% 完成</div> <!-- 动态显示进度 -->
      <div class="suggestion" @mouseover="hover = true" @mouseleave="hover = false">
        <img :src="hover ? require('@/assets/suggestion-hover.png') : require('@/assets/suggestion.png')" class="suggestion-photo">
        <div class="suggestion-text">更改建议</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    course: String,
    indexLearn: String,
    index: Number, // 添加一个index属性，表示当前组件的索引
    progress: Number, // 添加一个progress属性，表示学习进度
    pageLink: String // 新增一个属性来指定每个框的跳转链接
  },
  data() {
    return {
      hover: false,
    };
  },
  computed: {
    isSelected() {
      return this.index === this.$parent.selectedIndex;
    }
  },
  methods: {
    select() {
      this.$parent.selectedIndex = this.index;
      this.$router.push(this.pageLink); // 使用 Vue Router 跳转到指定页面
    }
  }
}
</script>


<style scoped>
.content {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  width: 800px;
  height: 270px;
  padding: 10px 20px;
  margin-left: 145px;
  background: rgba(238, 238, 238, 0.15);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer; /* 添加点击样式 */
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20%; /* 占父元素的20% */
}

.click-enter {
  font-size: 30px;
  color: #6b7280;
  transition: color 0.3s;
}

.click-enter:hover {
  color: black;
}

.actions {
  display: flex;
  gap: 20px; /* 设置按钮之间的间隔 */
}

.collect,
.share {
  display: flex;
  align-items: center;
  background-color: #facc15;
  border: none;
  border-radius: 6px;
  padding: 0 20px;

height: 32px;

background: #FACC15;
border-radius: 6px;


}

.collect-text,
.share-text {
  font-size: 18px;
}

.collect-photo,
.share-photo {
  width: 20px;
  height: 20px;
  object-fit: cover;
  margin-right: 10px;
}

.share:hover,
.collect:hover {
  background-color: #eab308;
}

.midle-content {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  justify-content: center;
  height: 70%; /* 占父元素的70% */
}

.course {
  font-size: 44px;
}

.index-learn {
  margin-top: 10px;
}

.bottom-content {
  display: flex;
  align-items: center;
  height: 10%; /* 占父元素的10% */
}

.road-map,
.complete {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.complete {
  background-color:#fef08a ;
  color: #875b25;
}

.map-photo,
.suggestion-photo {
  width: 20px;
  height: 20px;
  object-fit: cover;
}

.map-text,
.suggestion-text,
.complete {
  font-size: 18px;
  margin-left: 10px;
  
}

.suggestion {
  display: flex;
  align-items: center;
  margin-left: 400px;
  color: #6b7280;
}

.suggestion:hover .suggestion-photo {}

.suggestion:hover .suggestion-text {
  color: black; /* 文字变成黑色 */
}
</style>
